<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<c:set var="root" value="<%=request.getContextPath()%>" />

<div class="widget-box">
	<div class="widget-header header-color-pink">
		<h5>
			<i class="icon-table"></i>浸润线分析
		</h5>
		<div class="widget-toolbar no-border">
		 	<button id="export" onclick="exportExcel('/export/osmometer_ana');" class="btn btn-xs bigger btn-yellow dropdown-toggle">
				<i class="icon-download-alt"> 导出Excel</i>
			</button>
			<button id="read" onclick="readData('osmometer', '/analysis/osmometer')" class="btn btn-xs bigger btn-yellow dropdown-toggle">
				<i class="icon-book"> 读取渗压计最新数据</i>
			</button>
			<button id="refresh" onclick="trans2('/analysis/osmometer');" class="btn btn-xs bigger btn-yellow dropdown-toggle">
				<i class="icon-refresh"> 刷新</i>
			</button>
		</div>
	</div>
	<div class="widget-body">
		<div class="widget-main no-padding">
			<table class="table table-striped table-bordered table-hover">
				<tbody>
					<tr id="sectionName">
						<td colspan="1" style="width: 10%;color:#317eac;font-weight: bold;text-align: center;">断面</td>
						<c:forEach items="${maps }" var="map">
							<td colspan="${map.value }" style="text-align: center;font-weight: bold;">${map.key }</td>
						</c:forEach>
					</tr>
					<tr id="invadeName">
						<td id="monPos" style="color:#317eac;font-weight: bold;text-align: center;">渗压计</td>
						<c:forEach items="${sensors }" var="sen">
							<td style="text-align:center;font-weight: bold;">${sen.name }</td>
						</c:forEach>
					</tr>
					<tr id="initHeight">
						<td style="color:#317eac;font-weight: bold;text-align: center;">埋设深度CM</td>
						<c:forEach items="${sensors }" var="sen">
							<td style="text-align: center;"><fmt:formatNumber value="${sen.depth }" pattern="####.##"/></td>
						</c:forEach>
					</tr>
					<tr id="currentHeight">
						<td style="color:#317eac;font-weight: bold;text-align: center;">浸润线深度CM</td>
						<c:forEach items="${sensors }" var="sen">
							<td style="text-align: center;"><fmt:formatNumber type="number" pattern="#####.##" value="${sen.depth - sen.cm}" />
							</td>
						</c:forEach>
					</tr>
					<tr id="currentHeight2">
						<td style="color:#317eac;font-weight: bold;text-align: center;">水位变化量CM</td>
						<c:forEach items="${sensors }" var="sen">
							<td style="text-align: center;"><fmt:formatNumber type="number" pattern="####.##"  value="${sen.cm}"/></td>
						</c:forEach>
					</tr>
					<tr id="changeVal">
						<td style="color:#317eac;font-weight: bold;text-align: center;">报警深度CM</td>
						<c:forEach items="${sensors }" var="sen">
							<td style="text-align: center;">${sen.alarm }	</td>
						</c:forEach>
					</tr>
					<tr id="currentStatus"><!-- 报警深度：从地面向下的报警距离；浸润线深度：(埋深-变化量)(地面到当前水位距离)；埋深：地面到初始调零位置；报警=浸润线深度<=报警深度 -->
						<td style="color:#317eac;font-weight: bold;text-align: center;">当前状态</td>
						<c:forEach items="${sensors }" var="sen">
							<td style="text-align: center;">
							<c:if test="${sen.state==0}">
								<c:if test="${sen.info==-1}">
									<font color='red'>断线</font>
								</c:if>
								<c:if test="${sen.info==1}">
									<font color='red'>校验错误</font>
								</c:if>
								<c:if test="${sen.info==0}">
									${(sen.depth-sen.cm) <= sen.alarm ? "<font color='red'>报警</font>" : "正常" }
								</c:if>
							</c:if>
							<c:if test="${sen.state==1}">
								<font color='gray'>禁用</font>
							</c:if>
							</td>
						</c:forEach>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>

<div class="widget-box">
	<div class="widget-header header-color-pink">
		<h5>
			<i class="icon-book"></i>断面示意图
		</h5>
	</div>
	<div class="widget-body">
		<!-- <div class="widget-toolbox padding-8 clearfix">
			<label for="ymax">断面示意图</label>
		</div> -->
		<div style="margin-left: auto; margin-right: auto;">
			<img alt="google" src="${root}/resources/map/invade.jpg">
		</div>
	</div>
</div>
<script type="text/javascript">
	function exportExcel(urlStr){
		var url = "/tail/" + urlStr;
		window.open(url);
	}
</script>